<template>
    <div class="layout">
        <div class="container">
            <div class="title">{{ bulletinDetail.title }}</div>
            <div class="detail">
                <span> {{ bulletinDetail.main }} </span>
            </div>
            <div class="addressor">公告人: {{ bulletinDetail.addressor }}</div>
        </div>
    </div>
</template>

<script setup>
import { reqBulletinDetail } from '@/api/student/index';
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
import { useStudentStore } from '@/stores/modules/studentStore';
import { useRoute } from 'vue-router';

const route = useRoute();
const bulletinDetail = ref({});
const studentStore = useStudentStore();

const getBulletinDetail = async () => {
    try {
        const res = await reqBulletinDetail(
            studentStore.studentNum,
            route.params.id
        );
        if (res.status === '200') {
            bulletinDetail.value = res.data;
        }
    } catch (error) {
        ElMessage.error(error.message);
    }
};
onMounted(() => {
    getBulletinDetail();
});
</script>

<style scoped lang="scss">
.layout {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        justify-content: start;
        background-color: #f7f7f7;
        .title {
            font-size: 30rem;
            color: #333;
        }
        .detail {
            margin-top: 2vh;
            height: 50vh;
            font-size: 16rem;
            width: 90%;
        }
        .addressor {
            font-size: 20rem;
            width: 90%;
            margin-top: 2vh;
            height: 4vh;
            display: flex;
            justify-content: end;
            align-items: end;
        }
    }
}
</style>
